<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">实时数据趋势图</view>
		</cu-custom>
		<view :class="['qiun-charts' ,BackGroundBox]">
			<!--#ifdef MP-ALIPAY -->
			<canvas canvas-id="canvasArea" id="canvasArea" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
			 :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchArea"></canvas>
			<!--#endif-->
			<!--#ifndef MP-ALIPAY -->
			<canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchArea"></canvas>
			<!--#endif-->
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import uCharts from '@/colorui/components/u-charts/u-charts.js';
	import {ucharts} from '@/mixin/mixin.js'
	var canvaArea=null;
	export default {
		mixins:[ucharts],
		data() {
			return {
				height:this.screenHeight,
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				textarea:''
			}
		},
		computed: {
			...mapGetters(['Style','Font','BackGround','BackGroundBox'])
		},
		methods: {
			getServerData(){
				uni.request({
					url: 'https://www.ucharts.cn/data.json',
					data:{
					},
					success: (res) => {
						console.log(res.data.data)
						let Area={categories:[],series:[]};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						Area.categories=res.data.data.Area.categories;
						Area.series=res.data.data.Area.series;
						this.textarea = JSON.stringify(res.data.data.Area);
						this.showArea("canvasArea",Area);
						setTimeout(() => {
							Area.categories.push('2018')
							Area.series[0].data.push(47)
							Area.series[1].data.push(55)
							Area.series[2].data.push(88)
							this.textarea = JSON.stringify(res.data.data.Area);
							this.showArea("canvasArea",Area);
						},1000)
						setTimeout(() => {
							Area.categories.push('2019')
							Area.series[0].data.push(22)
							Area.series[1].data.push(88)
							Area.series[2].data.push(66)
							this.textarea = JSON.stringify(res.data.data.Area);
							this.showArea("canvasArea",Area);
						},2000)
					},
					fail: () => {
						this.tips="网络错误，小程序端请检查合法域名";
					},
				});
			},
			showArea(canvasId,chartData){
				canvaArea=new uCharts({
					$this:this,
					canvasId: canvasId,
					type: 'area',
					fontSize:11,
					padding:[0,15,10,15],
					legend:{
						show:true,
						position:'top',
						float:'center',
						itemGap:30,
						padding:5,
						lineHeight:18,
						margin:0,
					},
					dataLabel:false,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:this.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					xAxis: {
						type:'grid',
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8,
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						splitNumber:5,
					},
					width: this.cWidth*this.pixelRatio,
					height: this.cHeight*this.pixelRatio,
					extra: {
						area:{
							type: 'curve',
							opacity:0.2,
							addLine:true,
							width:2,
							gradient:false
						}
					}
				});
				
			},
			touchArea(e) {
				canvaArea.touchLegend(e);
				canvaArea.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
		},
	}
</script>

<style>

</style>
